import axios from 'axios'
import { Message } from 'element-ui'
import store from '../store'
// create an axios instance
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 5000 // request timeout
})

// 请求拦截
service.interceptors.request.use(
  (config) => {
    // 发请求时自动携带token
    // 非空时 携带token
    const _token = store.getters.token
    // 判断token是否存在
    if (_token) {
      // 将token添加到请求拦截中
      config.headers.Authorization = `Bearer ${_token}`
    }
    return config
  },
  (error) => {
    // do something with request error

    return Promise.reject(error)
  }
)

// 响应拦截
// 点击登录后需要对服务器返回的数据进行判断是否进入下一个页面
// 所以需要在对服务器发post请求后等，服务器返回数据到浏览器的过程中进行拦截，并对数据进行判断
service.interceptors.response.use(
  // 这里是请求成功，不管账户和密码是否对，服务器都会返回信息
  (response) => {
    // console.log(response)

    //  用解构语法拿到response的有效数据
    const { data, message, success } = response.data
    if (success === false) {
      // 如果登录失败则在页面提示错误信息
      Message.error(message)

      // 同时在控制台显示给程序员看
      // new一个Error对象来创建一个错误信息，同时能够阻断后续代码的执行，包括存token等
      return Promise.reject(new Error(message))
    } else {
      // 成功则返回数据
      return data
    }
  },
  // 这里是请求失败，获取不到服务器的返回的信息
  (error) => {
    return Promise.reject(error)
  }
)

export default service
